<template>
    <div class="div" style="width:100%;height:100%;position:relative;">
        <p class="Title">
                华小二联盟餐饮版门店后台业务管理系统
            </p>
        <div class="content">
            
            <div class="card">
                <Form :model="ruleForm2" ref="ruleForm2" :rules="ruleValidate" :label-width="0">
                    <FormItem prop="name" class="formstyle">
                        <Input type="text" v-model="ruleForm2.name" placeholder="手机号" @keyup.enter.native="submit">
                            <Icon type="ios-person-outline" slot="prepend" style="color:#2DB7F5"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password" style="margin-top: 40px;" class="formstyle">
                        <Input type="password" v-model="ruleForm2.password" placeholder="密码" @keyup.enter.native="submit">
                            <Icon type="ios-locked" slot="prepend" style="color:#2DB7F5"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem style="margin-top: 40px;">
                        <Button type="info" long shape="circle" style="height: 50px;font-size:18px;" @click="submit">立即登录</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
        <div class="filter"></div>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import {login} from '../api/home/home';
export default {
  data() {
    return {
      ruleForm2: {
        password: "",
        name: ""
      },
      ruleValidate: {
          name: [
              { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
          ]
      },
      toggleLogin: false,
      timer: null
    };
  },
  computed: {
    ...mapGetters(["token","toLogin"])
  },
  methods: {
    ...mapActions(["checkToken"]),
    ...mapMutations(['tooLogin']),
    submit() {
        var that = this;
        login(this.ruleForm2).then(res => {
            localStorage.setItem("data", res.data)
            localStorage.setItem("userName", this.ruleForm2.name)
            this.$Message.success('登录成功！');
            this.timer = setTimeout( () => {
                that.$router.push({name: 'homeMenu'})
                clearTimeout(that.timer)
            },800)
        })
    }
  },
  created() {
    
  }
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";
.div {
    background: url("http://cdn.huashijituan.net/u0_state0.jpg");
    background-size: cover;
    >.filter {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black;
        opacity: .4;
        top:0;
    }
    >.Title {
            width:100%;
            text-align: center;
            color: #fff;
            font-weight: bolder;
            font-size: 50px;
            font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
            position: absolute;
            z-index: 10;
            top:100px;
        }
    >.content {
        width: 600px;
        position: absolute;
        z-index: 10;
        top: 200px;
        left: calc(50% - 300px);
        // >.Title {
        //     width:100%;
        //     text-align: center;
        //     color: #fff;
        //     font-weight: bolder;
        //     font-size: 50px;
        //     font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
        // }
        >.card {
            margin-top: 50px;
            width:400px;
            margin-left: 100px;
        }
    }
}
.formstyle {
    padding: 5px;
    background: #e6e6e6;
    border-radius: 5px;
    border:1px solid #2DB7F5;
}
</style>
